import React, { Component, useEffect } from 'react';
import './index.less';
class MyStep extends Component {
  constructor(props) {
    super(props);
    this.state = {
      myx: null,
      flag: false,
    };
  }
  start(e) {
    this.setState({ flag: true });
  }
  startmove(e) {
    console.log(e, 'move');
    if (this.state.flag === true) {
      this.setState(
        {
          myx: e.clientX - 200,
        },
        () => {
          console.log(this.state.myx, '2参数');
        },
      );
    }
  }
  startOver(e) {
    this.setState({ flag: false });
  }

  render() {
    return (
      <div>
        <div
          className="boxcontaner"
          onMouseDown={(e) => this.start(e)}
          onMouseMove={(e) => this.startmove(e)}
          onMouseUp={(e) => this.startOver(e)}
        >
          <CompleteBgc myx={this.state.myx}></CompleteBgc>
          <MyDot myx={this.state.myx}></MyDot>
        </div>
      </div>
    );
  }
}

class CompleteBgc extends Component {
  render() {
    // console.log(this.props,"CompleteBgc");
    return (
      <>
        <div
          className="bgcmystep"
          style={{ width: `${this.props.myx}px` }}
        ></div>
      </>
    );
  }
}

class MyDot extends Component {
  render() {
    // console.log(this.props,"MyDot ");
    return (
      <div>
        <div className="radiodot" style={{ left: `${this.props.myx}px` }}></div>
      </div>
    );
  }
}

export default MyStep;
